<template>
<q-dialog persistent fixed v-model="isCreateDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
    <q-layout view="hHh Lpr fFf" container class=" hide-scrollbar">
        <q-header class=" shadow-7">

            <q-toolbar>
                <q-toolbar-title>创建报价</q-toolbar-title>
                <q-space />

                <q-btn dense flat icon="close" @click="trigerUpdate('close')">
                </q-btn>
            </q-toolbar>

        </q-header>
        <q-footer class=" q-pa-sm shadow-up-7">

            <q-toolbar inset>
              <div class="row justify-end text-subtitle1 text-bold ">
                合计：￥ {{ costTotal }}.00
              </div>
                <q-space></q-space>
                <q-btn outline class="q-px-md q-mr-sm" @click="cancleCreateQuote"> 取消</q-btn>
                <q-btn outline class="q-px-md" @click="submitCreateQuote"> 创建</q-btn>
            </q-toolbar>
        </q-footer>
        <q-page-container>
            <q-page  class=" row hide-scrollbar">

                <q-card flat style="width: 100%" class="column">

                    <!-- <q-separator color="grey"></q-separator> -->
                    <q-card-section class="q-px-md q-mx-md">
                        <q-form ref="createForm" class="column q-gutter-sm">
                            <q-input filled  v-model="createQuote.name" label="项目名称" maxlength="30" counter lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入项目名']" />
                            <q-select filled  v-model="createQuote.type" :options="typeOptions" option-label="typename" option-value="pt_id" label="项目类型" />
                            <div class="row ">
                              <q-input class="col-grow q-mr-sm" filled  v-model="createQuote.duration" label="成片时长"   />
                              <q-toggle

                              v-model="createQuote.isCommercial"
                              label="是否商用"
                              left-label
                              true-value="1"
                              false-value="0"
                            />
                            </div>

                            <q-select filled  v-model="createQuote.resolution" :options="resolutions" option-label="name" option-value="val" label="分辨率" />

                            <q-select filled  v-model="createQuote.fps" :options="[25, 50, 60]" label="帧率" />
                            <q-select filled  v-model="createQuote.aspectRatio" :options="['16:9', '2.35:1']" label="画面比例" />
                            <div class="row no-wrap items-center justify-between">
                                <q-input filled  v-model="createQuote.lastTime.from" label="开始时间" lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入开始时间',(val) => (/^(\d{4})\/(\d{2})\/(\d{2})$/.test(val)) || '日期格式不正确（yyyy/mm/dd）']" debounce="500">
                                    <template v-slot:prepend>
                                        <q-icon size="30px" name="event" class="cursor-pointer">
                                            <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                                                <q-date v-model="createQuote.lastTime" minimal range mask="YYYY/MM/DD">
                                                    <div class="row items-center justify-end">
                                                        <q-btn v-close-popup label="确认" color="primary" flat />
                                                    </div>
                                                </q-date>
                                            </q-popup-proxy>
                                        </q-icon>
                                    </template>
                                </q-input>
                                <span class="q-mx-sm text-bold">—</span>
                                <q-input filled  v-model="createQuote.lastTime.to" label="结束时间" lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入开始时间',(val) => (/^(\d{4})\/(\d{2})\/(\d{2})$/.test(val)) || '日期格式不正确（yyyy/mm/dd）']" debounce="500">

                                </q-input>
                            </div>



                        </q-form>
                    </q-card-section>
                    <q-card-section class="q-py-sm">
                      <q-expansion-item default-opened header-class="q-pa-none" class="q-pa-none">
                        <template v-slot:header>
                            <tips-title  class="full-width" title="前期制作" :isCaption="true" :capTitle="'合计：￥' +preTotal+'.00'" capClass="text-amber-6" tipclass="bg-amber-6" lineColor="amber" ></tips-title>
                        </template>
                        <q-card class="q-px-sm">
                          <q-list bordered class="rounded-borders">
                            <q-expansion-item expand-icon-toggle>
                              <template v-slot:header>

                                <q-item-section >
                                  <q-input @input="handleSumPreCost" filled type="number" dense v-model.number="createQuote.CJ"  label="策划及脚本" />
                                </q-item-section>
                              </template>

                              <q-card>
                                <q-card-section class="q-pt-none  ">
                                  <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                    <q-input  type="textarea" dense v-model="createQuote.CJ_remark"  label="备注" />
                                  </div>
                           </q-card-section>
                              </q-card>
                            </q-expansion-item>

                            <q-separator inset/>
                            <q-expansion-item expand-icon-toggle>
                              <template v-slot:header>

                                <q-item-section >
                                  <q-input filled @input="handleSumPreCost" type="number" dense v-model.number="createQuote.SR"  label="摄制人员费" />
                                </q-item-section>
                              </template>

                              <q-card>
                                <q-card-section class="q-pt-none  ">
                                  <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                    <q-input  type="textarea" dense v-model="createQuote.SR_remark"  label="备注" />
                                  </div>
                           </q-card-section>
                              </q-card>
                            </q-expansion-item>

                            <q-separator inset/>
                            <q-expansion-item expand-icon-toggle>
                              <template v-slot:header>

                                <q-item-section >
                                  <q-input filled @input="handleSumPreCost" type="number" dense v-model.number="createQuote.QD"  label="器材灯光费" />
                                </q-item-section>
                              </template>

                              <q-card>
                                <q-card-section class="q-pt-none  ">
                                  <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                    <q-input  type="textarea" dense v-model="createQuote.QD_remark"  label="备注" />
                                  </div>
                           </q-card-section>
                              </q-card>
                            </q-expansion-item>

                            <q-separator inset/>
                            <q-expansion-item expand-icon-toggle>
                              <template v-slot:header>

                                <q-item-section >
                                  <q-input filled @input="handleSumPreCost" type="number" dense v-model.number="createQuote.CZ"  label="场地置景费" />
                                </q-item-section>
                              </template>

                              <q-card>
                                <q-card-section class="q-pt-none  ">
                                  <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                    <q-input  type="textarea" dense v-model="createQuote.CZ_remark"  label="备注" />
                                  </div>
                           </q-card-section>
                              </q-card>
                            </q-expansion-item>

                            <q-separator inset/>
                            <q-expansion-item expand-icon-toggle>
                              <template v-slot:header>

                                <q-item-section >
                                  <q-input filled @input="handleSumPreCost" type="number" dense v-model.number="createQuote.YD"  label="演员道具费" />
                                </q-item-section>
                              </template>

                              <q-card>
                                <q-card-section class="q-pt-none  ">
                                  <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                    <q-input  type="textarea" dense v-model="createQuote.YD_remark"  label="备注" />
                                  </div>
                           </q-card-section>
                              </q-card>
                            </q-expansion-item>
                            <q-separator inset/>
                            <q-expansion-item expand-icon-toggle>
                              <template v-slot:header>

                                <q-item-section >
                                  <q-input filled @input="handleSumPreCost" type="number" dense v-model.number="createQuote.FZ"  label="服装造型费" />
                                </q-item-section>
                              </template>

                              <q-card>
                                <q-card-section class="q-pt-none  ">
                                  <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                    <q-input  type="textarea" dense v-model="createQuote.FZ_remark"  label="备注" />
                                  </div>
                           </q-card-section>
                              </q-card>
                            </q-expansion-item>
                            <q-separator inset/>
                          </q-list>
                        </q-card>
                    </q-expansion-item>

                    </q-card-section>
                    <q-card-section class="q-py-sm">
                      <q-expansion-item default-opened header-class="q-pa-none" class="q-pa-none">
                        <template v-slot:header>
                          <tips-title class="full-width" title="后期制作" tipclass="bg-blue-6" lineColor="blue" :isCaption="true" :capTitle="'合计：￥ '+postTotal+'.00'" capClass="text-blue-6" ></tips-title>
                        </template>
                        <q-card class=" q-px-sm">
                          <q-expansion-item expand-icon-toggle>
                            <template v-slot:header>

                              <q-item-section >
                                <q-input filled @input="handleSumPostCost" type="number" dense v-model.number="createQuote.JJ"  label="剪辑" />
                              </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  ">
                                <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                  <q-input  type="textarea" dense v-model="createQuote.JJ_remark"  label="备注" />
                                </div>
                         </q-card-section>
                            </q-card>
                          </q-expansion-item>
                          <q-separator inset/>
                          <q-expansion-item expand-icon-toggle>
                            <template v-slot:header>

                              <q-item-section >
                                <q-input filled @input="handleSumPostCost" type="number" dense v-model.number="createQuote.TS"  label="调色" />
                              </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  ">
                                <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                  <q-input  type="textarea" dense v-model="createQuote.TS_remark"  label="备注" />
                                </div>
                         </q-card-section>
                            </q-card>
                          </q-expansion-item>
                          <q-separator inset/>
                          <q-expansion-item expand-icon-toggle>
                            <template v-slot:header>

                              <q-item-section >
                                <q-input filled @input="handleSumPostCost" type="number" dense v-model.number="createQuote.YS"  label="音效设计" />
                              </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  ">
                                <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                  <q-input  type="textarea" dense v-model="createQuote.YS_remark"  label="备注" />
                                </div>
                         </q-card-section>
                            </q-card>
                          </q-expansion-item>
                          <q-separator inset/>
                          <q-expansion-item expand-icon-toggle>
                            <template v-slot:header>

                              <q-item-section >
                                <q-input filled @input="handleSumPostCost" type="number" dense v-model.number="createQuote.SB"  label="视觉包装" />
                              </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  ">
                                <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                  <q-input  type="textarea" dense v-model="createQuote.SB_remark"  label="备注" />
                                </div>
                         </q-card-section>
                            </q-card>
                          </q-expansion-item>
                          <q-separator inset/>
                          <q-expansion-item expand-icon-toggle>
                            <template v-slot:header>

                              <q-item-section >
                                <q-input @input="handleSumPostCost" filled type="number" dense v-model.number="createQuote.DT"  label="动画特效" />
                              </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  ">
                                <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                  <q-input  type="textarea" dense v-model="createQuote.DT_remark"  label="备注" />
                                </div>
                         </q-card-section>
                            </q-card>
                          </q-expansion-item>
                          <q-separator inset/>
                          <q-expansion-item expand-icon-toggle>
                            <template v-slot:header>

                              <q-item-section >
                                <q-input @input="handleSumPostCost" filled type="number" dense v-model.number="createQuote.PY"  label="配音费" />
                              </q-item-section>
                            </template>

                            <q-card>
                              <q-card-section class="q-pt-none  ">
                                <div class="q-pa-sm bg-blue-1 text-caption text-weight-light" style="border-radius:10px">
                                  <q-input  type="textarea" dense v-model="createQuote.PY_remark"  label="备注" />
                                </div>
                         </q-card-section>
                            </q-card>
                          </q-expansion-item>
                          <q-separator inset/>


                        </q-card>
                    </q-expansion-item>



                    </q-card-section>
                    <q-card-section class="q-py-sm">
                      <q-expansion-item default-opened header-class="q-pa-none" class="q-pa-none">
                        <template v-slot:header>
                          <tips-title class="full-width" title="其他" tipclass="bg-cyan-6" lineColor="cyan-6" :isCaption="true" :capTitle="'合计：￥ '+((preTotal+postTotal)*createQuote.vat/100).toFixed(0)+'.00'" capClass="text-cyan-6"></tips-title>
                        </template>
                        <q-card class=" q-px-sm">
                          <q-expansion-item disable >
                            <template v-slot:header>


                              <q-item-section>
                                增值税3%
                              </q-item-section>

                              <q-item-section side>
                               {{((preTotal+postTotal)*createQuote.vat/100).toFixed(0) }}.00
                              </q-item-section>
                            </template>

                          </q-expansion-item>
                          <q-separator inset/>


                        </q-card>
                    </q-expansion-item>

                    </q-card-section>



                </q-card>



            </q-page>
        </q-page-container>

    </q-layout>

</q-dialog>
</template>

<script>
import {
    getProjectType
} from "assets/api/project";
import {submitQuote} from "assets/api/app"
export default {
    name: 'CreateQuote',

    props: {
        isCreateDialog: {
            default: false
        },

    },
    data() {
        return {
            createQuote: {
                name: "",
                type: {
                    pt_id: 3,
                    typename: '宣传片'
                },
                resolution: {
                    name: "HD(1080P)",
                    val: "HD",
                },
                fps: 25,
                lastTime: {
                    from: "",
                    to: "",
                },
                aspectRatio: "16:9",
                isCommercial:"0",

                CJ:0,
                CJ_remark:'',
                SR:0,
                SR_remark:'',
                QD:0,
                QD_remark:'',
                CZ:0,
                CZ_remark:'',
                YD:0,
                YD_remark:'',
                FZ:0,
                FZ_remark:'',
                JJ:0,
                JJ_remark:'',
                TS:0,
                TS_remark:'',
                YS:0,
                YS_remark:'',
                SB:0,
                SB_remark:'',
                DT:0,
                DT_remark:'',
                PY:0,
                PY_remark:'',
                vat:3,
                cg_time:'',
                zg_time:'',
                preTotal:0,
                postTotal:0,
                vatTotal:0,
                costTotal:0,
            },
            preTotal:0,
            postTotal:0,
            costTotal:0,
            resolutions: [{
                    name: "UHD(4k)",
                    val: "UHD",
                },
                {
                    name: "HD(1080P)",
                    val: "HD",
                },
            ],
            typeOptions: [],
            isMemSeleteDialog: false,
            createUser: [],
            projectMembers: [],
            duration:''
        }
    },
    watch: {
      isCreateDialog: function (val) {
            console.log(val, 'createproject');
            if (val) {

                this.loadprojectType()
            }
        }
    },
    methods: {
        loadprojectType() {
            getProjectType().then(res => {
                console.log(res);
                this.typeOptions = res.data.data
            })
        },
        sumCostTotal(){
          this.createQuote.vatTotal = parseInt(((this.preTotal+this.postTotal)*this.createQuote.vat/100).toFixed(0))
          this.costTotal = parseInt(this.preTotal)+parseInt(this.postTotal)+parseInt(((this.preTotal+this.postTotal)*this.createQuote.vat/100).toFixed(0))
          this.createQuote.preTotal=parseInt(this.preTotal)
          this.createQuote.postTotal=parseInt(this.postTotal)
        },
        handleSumPreCost(){
          console.log(this.createQuote.CJ,typeof(this.createQuote.CJ));
          this.preTotal = this.createQuote.CJ+this.createQuote.SR+this.createQuote.QD+this.createQuote.CZ+this.createQuote.YD+this.createQuote.FZ
          this.sumCostTotal()

        },
        handleSumPostCost(){
          this.postTotal = this.createQuote.JJ+this.createQuote.TS+this.createQuote.YS+this.createQuote.SB+this.createQuote.DT+this.createQuote.PY
          this.sumCostTotal()
        },
        updatePermission(i, v) {
            this.projectMembers.forEach(item => {
                if (item.username == i.username) {
                    item.permission = v;
                }
            })
        },


        trigerUpdate(type) {
            this.$emit('update', type)
        },
        handleReset() {
            this.createQuote =  {
                name: "",
                type: {
                    pt_id: 3,
                    typename: '宣传片'
                },
                resolution: {
                    name: "HD(1080P)",
                    val: "HD",
                },
                fps: 25,
                lastTime: {
                    from: "",
                    to: "",
                },
                aspectRatio: "16:9",
                isCommercial:false,

                CJ:0,
                CJ_remark:'',
                SR:0,
                SR_remark:'',
                QD:0,
                QD_remark:'',
                CZ:0,
                CZ_remark:'',
                YD:0,
                YD_remark:'',
                FZ:0,
                FZ_remark:'',
                JJ:0,
                JJ_remark:'',
                TS:0,
                TS_remark:'',
                YS:0,
                YS_remark:'',
                SB:0,
                SB_remark:'',
                DT:0,
                DT_remark:'',
                PY:0,
                PY_remark:'',
                vat:3,
                cg_time:'',
                zg_time:'',
                preTotal:0,
                postTotal:0,
                vatTotal:0,
                costTotal:0,
            }
            this.preTotal=0
            this.postTotal=0
            this.costTotal=0
        },

        cancleCreateQuote() {
            this.trigerUpdate('close');
            // 重置验证：
            this.handleReset();
            this.$refs.createForm.resetValidation()

        },
        submitCreateQuote() {
            this.$refs.createForm.validate().then(success => {
                if (success) {

                    this.$q.loading.show({
                        customClass: 'mypage-loading',
                        message: '<span class="text-white text-weight-bold">创建中...</span>'
                    })
                    this.createQuote.costTotal = this.costTotal
                    return submitQuote({
                        data: this.createQuote
                    })

                } else {
                    // 哦，不，用户至少
                    // 填写了一个无效值
                }
            }).then(res => {
                this.$q.loading.hide();
                if (res.data.code == 1) {
                    this.handleReset();
                    this.trigerUpdate('reload');

                    this.$message.success('创建成功')
                } else {
                    this.$message.error(res.code.err)
                }
            })

        },
    }
}
</script>
